<template>
  <div>
    <a-spin :spinning="tableLoad">
      <a-row>
        <a-col :md="5" :xs="24" style="padding-right: 10px;">
          <div class="fxBox mb10">
            <Prompter @search="lineSearch" :all="mapLists.total"></Prompter>
          </div>
          <a-input-search @search="onSearch" class="mb10" style="z-index: 1;" placeholder="设备编号或名称" enterButton />
          <div style="width: 100%;height:660px; overflow: auto;">
            <a-list itemLayout="horizontal" :pagination="false" :dataSource="mapLists.data">
            <a-list-item
              style="padding-left:5px;padding-right:5px;"
              :class="index === active ? 'videoLists on' : 'videoLists'"
              @click="getVideo(item, index)"
              slot="renderItem"
              slot-scope="item, index"
            >
              <a-list-item-meta>
                <template slot="title">{{item.name}}</template>
                <!-- style="width:20%;" class="overflow-ellipsis" -->
                <div slot="description" :title="`所属单位：${item.company_name}\n设备MAC：${item.code ? item.code :'未绑定'}`">
                  所属单位：{{item.company_name}}
                  <br/>
                  设备MAC：{{item.code ? `(${item.code})` : '未绑定'}}
                </div>
                <a-icon slot="avatar" v-if="item.is_OnLine == 1" title="在线" theme="filled" style="fontSize: 24px; color: #52c41a;" type="check-circle" />
                <a-icon slot="avatar" v-else title="离线" theme="filled" style="fontSize: 24px;color: #fe5d58;" type="exclamation-circle" />
              </a-list-item-meta>
              <div>
                <a-icon type="right" />
              </div>
            </a-list-item>
          </a-list>
          </div>
          <div class="pageBox" style="position: relative;bottom: 0;">
            <a-pagination
              :total="mapLists.total"
              :showTotal="total => `共 ${total} 条数据`"
              :pageSize="mapLists.per_page"
              :defaultCurrent="1"
              @change="pageChange"
            />
          </div>
        </a-col>
        <a-col :md="19" :xs="24">
          <baidu-map :center="centerVal" @ready="baiduMap" :scroll-wheel-zoom="true">
            <bm-view id="map" class="map"></bm-view>
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <div v-for="item in mapLists.data" :key="item.id">
              <bm-marker animation="BMAP_ANIMATION_BOUNCE" :icon="{url: isIcon(item.is_OnLine), size: {width: 30, height: 30}}" :position="{'lng': item.longitude, 'lat': item.latitude}" @click="infoWindowOpen(item)">
                
                <bm-info-window  :offset="{width: 0, height: 0}" :position="{'lng': item.longitude, 'lat': item.latitude}" title="" :show="item.show" @close="infoWindowClose(item)" @open="infoWindowOpen(item)">
                  <div class="infoTop" style="display: flex;">
                    <div class="mr10" v-if="item.img_pic">
                      <a :href="item.img_pic" target="_blank">
                        <img :src="item.img_pic" height="78" :alt="item.name">
                      </a>
                    </div>
                    <div class="infoleft">
                      <h2 style="font-size: 20px;color: #ff9800;line-height: 24px;font-weight: 400;">
                        {{item.name}}
                      </h2>
                      <h5>
                        <span style="font-weight: bold;">在线状态：</span>
                        {{item.is_OnLine == "1" ? "在线" : "离线"}}
                      </h5>
                      <h5>
                        <span style="font-weight: bold;">所属单位：</span>
                        {{item.company_name}}
                      </h5>
                      <h5>
                        <span style="font-weight: bold;">安装地址：</span>
                        {{item.address}}
                      </h5>
                    </div>
                  </div>
                  <div class="mt10" style="display: flex; justify-content: center;">
                    <a-button v-if="routerShow($route,'control_briefing') && routerShow($route,'data_newData')" class="mr5 btn-success" type="primary" @click="dataBtn(item)">数据显示</a-button>
                    <a-button v-if="routerShow($route,'data_historyForm')" class="mr5 btn-warning" type="primary"  @click="historyBtn(item)">历史记录</a-button>
                    <a-button v-if="routerShow($route,'equipment_list')" class="mr5 btn-error" type="primary"  @click="equipmentBtn(item)">设备管理</a-button>
                    <a-button v-if="routerShow($route,'YieldReport_list')" type="primary"  @click="StatisticsBtn(item)">统计报表</a-button>
                  </div>
                </bm-info-window>
              </bm-marker>
            </div>
          </baidu-map>
        </a-col>
      </a-row>
      <div>
        <h4></h4>
      </div>
    </a-spin>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import Prompter from "@C/Prompter/"; //机器在线离线提示器
// import imgUrl from "@images/"
export default {
  name: "MapDisplay",
  components: {
    Prompter
  },
  data() {
    return {
      isClickTime: true,//连点拦截
      infoWindow: {
        show: false,
        item: {},
        coordinate: {},
      },
      /* 通用模块 */
      //列表
      tableLoad: false, //列表loading状态
      formList: {
        page: 1
      },
      /* 通用模块end */
      active: "",

      // 地图实例
      centerVal: "",
      BMap: "",
      map: ""
    };
  },
  computed: {
    ...mapState({
      mapLists: state => state.controlCenter.mapLists
    })
  },
  mounted() {
    this.changeData();
  },
  watch:{
    mapLists(){
      this.dataChange()
    }
  },
  methods: {
    isIcon(val){
      if(val == 1){
        return require("@images/position_green.png")
      } else {
        return require("@images/position_red.png")
      }
    },
    dataBtn(item) {
      this.$router.push({
        path: '/control_center/list',
        query: {
          equipmentId : item.id,
        }
      })
    },
    historyBtn(item) {
      this.$router.push({
        path: '/data_center/history_report',
        query: {
          equipmentId : item.id,
        }
      })
    },
    equipmentBtn(item) {
      this.$router.push({
        path: '/equipment/list',
        query: {
          equipmentId : item.id,
        }
      })
    },
    StatisticsBtn(item){
      this.$router.push({
        path: '/data_center/statistics',
        query: {
          equipmentId : item.id,
        }
      })
    },
    lineSearch(type) {
      console.log(type);
      if (type === 0 || type === 1) {
        this.formList = {
          is_online: type,
          page: 1
        }
      } else if (type === 2) {
        this.formList = {
          page: 1
        }
      }
      this.changeData()
    },
    // 地图初始化渲染
    dataChange(){
      let BMap = this.BMap;
      let map = this.map;
      let points = [];
      this.mapLists.data.forEach(item => {
        if (item.longitude != null && item.latitude != null) {
          let point = {
            lat: item.latitude,
            lng: item.longitude
          }; //创建地理坐标点
          points.push(point);
        }
      });
      // 根据标注点位置设置缩放比例  
      var view = map.getViewport(eval(points));
      var mapZoom = view.zoom; 
      var centerPoint = view.center; 
      map.centerAndZoom(centerPoint, mapZoom);
    },
    //信息窗口关闭
    infoWindowClose (item) {
      this.mapLists.data.forEach(mapItem => {
        mapItem.show = false
      })
    },
    //点击的信息窗口打开
    infoWindowOpen (item) {
      let BMap = this.BMap;
      let map = this.map;
      let point = new BMap.Point(item.longitude, item.latitude); //创建地理坐标点
      map.centerAndZoom(point, 15); //设置地图中心为point的地理坐标点
      this.mapLists.data.forEach(mapItem => {
        if (mapItem.id == item.id) {
          mapItem.show = true
        }
      })
    },
    /* 通用模块 */
    ...mapActions({
      getLists: "controlCenter/mapLists" //设备列表
    }),
    onSearch(val){
      this.formList = {
        name: val,
        page: 1
      }
      this.changeData()
    },
    // 重新获取列表数据
    changeData() {
      this.tableLoad = true;
      this.getLists(this.formList);
      setTimeout(() => {
         this.tableLoad = false;
      }, 800);
    },
    // 页码
    pageChange(page) {
      this.formList.page = page;
      this.getLists(this.formList);
    },
    /* 通用模块end */

    //显示点击的当前信息
    getVideo(item, index) {
      this.active = index;
      let BMap = this.BMap;
      let map = this.map;
      if (item.longitude != null && item.latitude != null) {
        this.infoWindowOpen(item)
      } else {
        this.dataChange()
        if (this.isClickTime) {
          this.isClickTime = false
          this.infoWindowClose()
          this.$notification.warning({
            message: `该设备未设置公司地址！`,
            description:`设备名称：${item.name} `
          })
          setTimeout(() => {
            this.isClickTime = true
          }, 1000);
        }
      }
    },
    /* 百度地图 */
    baiduMap({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
    }
    /* 百度地图end */
  }
};
</script>
<style scoped lang="stylus">
>>> .ant-list-item-content {
  flex: initial !important
}

#map {
  width: 100%;
  height: 800px;
  min-height: 800px;
}

overflow hidden, .videoLists {
  cursor: pointer;
}

.videoLists:hover, .on {
  background: #d4eaff;
}
</style>
</style>
